<template>
  <view class="content">
    <view class="wrapper">
      <view class="left-top-sign">LOGIN</view>
      <view class="welcome">欢迎回来！</view>
      <view class="input-content">
        <view class="input-item">
          <text class="tit">用户名</text>
          <input type="text" placeholder="请输入用户名" v-model="data.mobile" />
        </view>
        <view class="input-item">
          <text class="tit">密码</text>
          <input type="password" placeholder="请输入密码" v-model="data.password" />
        </view>
      </view>
      <button class="confirm-btn" @click="login">登录</button>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { reactive } from 'vue';
import { api } from '@/api/mop_api';
import { toast, err, set, get, to } from '@/utils/uniapi';
const data = reactive({
  mobile: get('mobile') || '',
  password: ''
});
async function login() {
  try {
    const { mobile, password } = data;
    if (!mobile || !password) {
      toast('请将信息输入完整');
      return;
    }
    const res = await api.moplogin({ mobile, password });
    if (res.respCode === 200) {
      const { token, source } = res;
      const { mchId } = JSON.parse(source);
      set('token', token);
      set('mobile', mobile);
      toast('登录成功');
      to('/dj/mchList/mchList');
    } else {
      toast(res.msg);
    }
  } catch (error) {
    err(error);
    throw error;
  }
}
</script>

<style scoped lang="scss">
.wrapper {
  position: relative;
  z-index: 90;
  padding-bottom: 40rpx;
  .left-top-sign {
    font-size: 120rpx;
    color: #f4f4f4;
    position: relative;
    left: -16rpx;
  }
  .welcome {
    position: relative;
    left: 50rpx;
    top: -90rpx;
    font-size: 46rpx;
    color: #555;
  }
  .input-content {
    padding: 0 60rpx;
    .input-item {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: center;
      padding: 0 30rpx;
      background: #f8f6fc;
      height: 120rpx;
      border-radius: 4px;
      margin-bottom: 50rpx;
      .tit {
        height: 50rpx;
        line-height: 56rpx;
        font-size: 30rpx;
        color: #606266;
      }
      input {
        height: 60rpx;
        font-size: 30rpx;
        color: #303133;
        width: 100%;
      }
    }
    .input-item:last-child {
      margin-bottom: 0;
    }
  }
  .confirm-btn {
    width: 630rpx !important;
    height: 76rpx;
    line-height: 76rpx;
    border-radius: 50rpx;
    margin-top: 70rpx;
    background: #d43c33;
    color: #fff;
    font-size: 32rpx;
    padding: 0;
  }
  .confirm-btn2:after {
    border-radius: 100px;
  }
}
</style>
